<template>
    <div class="map_box" style="z-index: 2;  overflow: hidden;">
        <div id="container"></div>
        <div class="cover">
            <el-radio-group v-model="radio" size="mini" @change="draw">
                <el-radio v-for="(item) of radioGroup" :key="item.value" :label="item.value" border>{{item.name}}</el-radio>
            </el-radio-group>
            <div class="input-item">
                <el-button type="primary" round @click="clearDraw">清除</el-button>
                <el-button type="primary" round @click="closeDraw">关闭绘图</el-button>
            </div>
<!--            asdasd-->
        </div>
    </div>
</template>
<script>
    import AMapLoader from "@amap/amap-jsapi-loader";
    export default {
        name: "diviceMap",
        data(){
            return {
                map: null,
                maker: null,
                marker: [118.118174, 24.468552],
                markers: [],
                icon: null,
                isShow: false,
                out: true,
                mapModule: null,
                radioGroup: [
                    {name: '画点', value: 'marker'},
                    {name: '画折线', value: 'polyline'},
                    {name: '画多边形', value: 'polygon'},
                    {name: '画矩形', value: 'rectangle'},
                    {name: '画圆', value: 'circle'},
                    {name: '拉框放大', value: 'zoomIn'},
                    {name: '拉框缩放', value: 'zoomOut'}
                ],
                radio: '',
                mouseTool: null, //覆盖物
                overlays: [], // f覆盖物数组
                center: [118.126078, 24.459206],
                zoom: 11, //初始化地图级别
                cluster: [],
                points: [
                    { weight: 8,lnglat: [118.118547,24.475637]},
                    { lnglat: [118.081211,24.493369]},
                    { lnglat: [ 118.08885,24.494072]},
                    { lnglat: [ 118.09503,24.48962]},
                    { weight: 8,lnglat: [ 118.102926,24.48837]},
                    { lnglat: [ 118.08679,24.485402]},
                    { lnglat: [ 118.081941,24.485909]},
                    { lnglat: [ 118.090137,24.476614]},
                    { lnglat: [ 118.094171,24.475598]},
                    { lnglat: [ 118.089794,24.472708]},
                    { lnglat: [ 118.094987,24.480051]},
                    { lnglat: [ 118.083614,24.47802]},
                    { lnglat: [ 118.09606,24.48298]},
                    { lnglat: [ 118.10181,24.478215]},
                    { lnglat: [ 118.083829,24.477864]},
                    {
                        lnglat: [118.137158,24.451969]
                    },
                    {
                        lnglat: [118.144797,24.452047]
                    },
                    {
                        lnglat: [118.14351,24.445562]
                    },
                    {
                        lnglat: [118.114928,24.446812]
                    },
                    {weight: 8,
                        lnglat: [118.106879,24.453121],
                        name: 'qwe5q5w6'
                    },
                    {
                        lnglat: [118.103618,24.455934],
                        name: 'qwe5q5w6'
                    },
                    {
                        lnglat: [118.114261,24.457731],
                        name: 'qwe5q5w6'
                    },
                    {
                        lnglat: [118.12184,24.457445],
                        name: 'qwe5q5w6'
                    },
                    {
                        lnglat: [118.13044,24.456637]
                    },
                    {
                        lnglat: [118.112738,24.446725],
                        name: 'qwe5q5w6'
                    },
                    {
                        lnglat: [118.104035,24.442895]
                    },
                    {
                        lnglat: [118.12364,24.444474],
                        name: 'qwe5q5w6'
                    },
                    {
                        lnglat: [118.12673,24.443168]
                    },
                    {weight: 8,
                        lnglat: [118.129158,24.442967],
                        name: 'qwe5q5w6'
                    },
                    {
                        lnglat: [118.133463,24.443068],
                        name: 'qwe5q5w6'
                    },
                    {
                        lnglat: [118.13887,24.444675],
                        name: 'qwe5q5w6'
                    },
                    {
                        lnglat: [118.141298,24.444273],
                        name: 'qwe5q5w6'
                    },
                    {
                        lnglat: [118.145603,24.443972],
                        name: 'qwe5q5w6'
                    },
                    {
                        lnglat: [118.149134,24.444977],
                        name: 'qwe5q5w6'
                    },
                    {
                        lnglat: [118.154101,24.448091],
                        name: 'qwe5q5w6'
                    },
                    {
                        lnglat: [118.156198,24.450603],
                        name: 'qwe5q5w6'
                    },
                    {
                        lnglat: [118.159177,24.457105],
                        name: 'qwe5q5w6'
                    },
                    {
                        lnglat: [118.152089,24.464283],
                        name: 'qwe5q5w6'
                    },
                    {
                        lnglat: [118.136969,24.475835],
                        name: 'qwe5q5w6'
                    },
                    {
                        lnglat: [118.112247,24.48136],
                        name: 'qwe5q5w6'
                    },
                    {
                        lnglat: [118.102535,24.48136],
                        name: 'qwe5q5w6'
                    },
                    {
                        lnglat: [118.099886,24.492458],
                        name: 'qwe5q5w6'
                    },
                    {
                        lnglat: [118.096631,24.499066],
                        name: 'qwe5q5w6'
                    },
                    {
                        lnglat: [118.102425,24.507803],
                        name: 'qwe5q5w6'
                    },
                    {
                        lnglat: [118.106398,24.509159],
                        name: 'qwe5q5w6'
                    },
                    {
                        lnglat: [118.111806,24.509159],
                        name: 'qwe5q5w6'
                    },
                    {
                        lnglat: [118.119366,24.509611],
                        name: 'qwe5q5w6'
                    },
                    {
                        lnglat: [118.12676,24.509259],
                        name: 'qwe5q5w6'
                    },
                    {
                        lnglat: [118.131009,24.509058],
                        name: 'qwe5q5w6'
                    },
                    {
                        lnglat: [118.132885,24.50705],
                        name: 'qwe5q5w6'
                    },
                    {
                        lnglat: [118.139121,24.504489],
                        name: 'qwe5q5w6'
                    },
                    {
                        lnglat: [118.144862,24.506183],
                        name: 'qwe5q5w6'
                    },
                    {
                        lnglat: [118.163051,24.492784],
                        name: 'qwe5q5w6'
                    },
                    {
                        lnglat: [118.168511,24.498359],
                        name: 'qwe5q5w6'
                    },
                    {
                        lnglat: [118.162651,24.509787],
                        name: 'qwe5q5w6'
                    },
                    {
                        lnglat: [118.158123,24.519481],
                        name: 'qwe5q5w6'
                    },
                    {
                        lnglat: [118.129887,24.536383],
                        name: 'qwe5q5w6'
                    },
                    {
                        lnglat: [118.124027,24.549098],
                        name: 'qwe5q5w6'
                    },
                    {
                        lnglat: [118.141474,24.540981],
                        name: 'qwe5q5w6'
                    },
                    {
                        lnglat: [118.162059,24.535636],
                        name: 'qwe5q5w6'
                    },
                    {
                        lnglat: [118.168778,24.533469],
                        name: 'qwe5q5w6'
                    },
                    {
                        lnglat: [118.172574,24.530561],
                        name: 'qwe5q5w6'
                    },
                    {
                        lnglat: [118.173373,24.525956],
                        name: 'qwe5q5w6'
                    }
                ],
                gridSize: 120, // 设置网格像素大小
            }
        },
        methods: {
            initMap() {
                let that = this;
                AMapLoader.load({
                    key: "a503f62db84dba58af028cf80401f4ca", //此处填入我们注册账号后获取的Key
                    version: "2.0", //指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
                    plugins: ['AMap.AutoComplete','AMap.PlaceSearch','AMap.MarkerClusterer','AMap.DistrictSearch','AMap.MouseTool','AMap.IndexCluster'], //需要使用的的插件列表，如比例尺'AMap.Scale'等
                }).then((AMap) => {
                    that.mapModule = AMap;
                    that.map = new AMap.Map("container", { //设置地图容器id
                        viewMode: "3D", //是否为3D地图模式
                        zoom: that.zoom, //初始化地图级别
                        center: that.center, //初始化地图中心点位置
                    });
                    // that.map.on('click', that.showInfoClick);

                    that.mouseTool = new AMap.MouseTool(that.map);
                    that.mouseTool.on('draw', that.drawOverlays);

                    that.cluster = new AMap.MarkerCluster(that.map,that.points,{
                        renderClusterMarker: that.renderClusterMarker,// 自定义聚合点样式
                        gridSize: that.gridSize, // 设置网格像素大小
                        renderMarker: that.renderMarker, // 自定义非聚合点样式
                    });
                    // 如何获取原数据？
                    // 设置点聚合的点击事件，在这里你可以根据你原数据的id，去做你想做的事，我就不明说了
                    that.cluster.on("click", data => {
                        // console.log("click", data);
                        const {clusterData} = data;
                        console.log(clusterData); // 原始数据
                    })
                }).catch(e => {
                    console.log(e);
                })
            },
            // 自定义聚合点样式
            renderClusterMarker(context) {
                let that = this;
                let count = that.points.length;
                let factor = Math.pow(context.count / count, 1 / 18);
                let div = document.createElement('div');
                let Hue = 180 - factor * 180;
                let bgColor = 'hsla(' + Hue + ',100%,40%,0.7)';
                let fontColor = 'hsla(' + Hue + ',100%,90%,1)';
                let borderColor = 'hsla(' + Hue + ',100%,40%,1)';
                let shadowColor = 'hsla(' + Hue + ',100%,90%,1)';
                div.style.backgroundColor = bgColor;
                let size = Math.round(30 + Math.pow(context.count / count, 1 / 5) * 20);
                div.style.width = div.style.height = size + 'px';
                div.style.border = 'solid 1px ' + borderColor;
                div.style.borderRadius = size / 2 + 'px';
                div.style.boxShadow = '0 0 5px ' + shadowColor;
                div.innerHTML = context.count;
                div.style.lineHeight = size + 'px';
                div.style.color = fontColor;
                div.style.fontSize = '14px';
                div.style.textAlign = 'center';
                context.marker.setOffset(new that.mapModule.Pixel(-size / 2, -size / 2));
                context.marker.setContent(div);
                context.marker.on('click', function(e) {
                    console.log(e)
                    let curZoom = that.map.getZoom();
                    if(curZoom < 20){
                        curZoom += 1;
                    }
                    that.map.setZoomAndCenter(curZoom, e.lnglat);
                });
            },
            renderMarker(context){
                let content = '<div style="background-color: hsla(180, 100%, 50%, 0.3); height: 18px; width: 18px; border: 1px solid hsl(180, 100%, 40%); border-radius: 12px; box-shadow: hsl(180, 100%, 50%) 0px 0px 3px;"></div>';
                let offset = new this.mapModule.Pixel(-9, -9);
                context.marker.setContent(content)
                context.marker.setOffset(offset)
            },
            draw(type){
                switch(type){
                    case 'marker':{
                        this.mouseTool.marker({
                            //同Marker的Option设置
                        });
                        break;
                    }
                    case 'polyline':{
                        this.mouseTool.polyline({
                            strokeColor:'#80d8ff'
                            //同Polyline的Option设置
                        });
                        break;
                    }
                    case 'polygon':{
                        this.mouseTool.polygon({
                            fillColor:'#00b0ff',
                            strokeColor:'#80d8ff'
                            //同Polygon的Option设置
                        });
                        break;
                    }
                    case 'rectangle':{
                        this.mouseTool.rectangle({
                            fillColor:'#00b0ff',
                            strokeColor:'#80d8ff'
                            //同Polygon的Option设置
                        });
                        break;
                    }
                    case 'circle':{
                        this.mouseTool.circle({
                            fillColor:'#00b0ff',
                            strokeColor:'#80d8ff'
                            //同Circle的Option设置
                        });
                        break;
                    }
                    case 'zoomIn':{
                        this.mouseTool.rectZoomIn({
                            strokeColor:'#80d8ff',
                            fillColor:'#80d8ff',
                            fillOpacity:0.3
                            //同 Polygon 的 Option 设置

                        });
                        break;
                    }
                    case 'zoomOut':{
                        this.mouseTool.rectZoomOut({
                            strokeColor:'#80d8ff',
                            fillColor:'#80d8ff',
                            fillOpacity:0.3
                            //同 Polygon 的 Option 设置
                        });
                        break;
                    }
                }
            },
            drawOverlays(e) {
                // console.log(e);//获取路径
                this.overlays.push(e.obj);
                if (this.radio === 'marker') {
                    console.log(e.obj)
                }else if(this.radio === 'circle'){
                    console.log(e.obj.getRadius());//获取半径
                    console.log(e.obj.getCenter());//获取中心点
                    let curZoom = this.map.getZoom();
                    if(curZoom > 5){
                        curZoom -= 1;
                    }
                    this.map.setZoomAndCenter(curZoom, e.obj.getCenter());
                    // this.clearDraw();
                }else {
                    let northEast = [e.obj.getBounds().northEast.lng,e.obj.getBounds().northEast.lat];
                    let southWest = [e.obj.getBounds().southWest.lng,e.obj.getBounds().southWest.lat]
                    console.log(e.obj.getBounds())
                    let mybounds = new this.mapModule.Bounds(northEast, southWest);
                    this.map.setBounds(mybounds);
                }
            },
            // 清除覆盖物
            clearDraw(){
                this.map.remove(this.overlays)
                this.overlays = [];
            },
            //关闭，并清除覆盖物
            closeDraw(){
                this.mouseTool.close(true);//关闭，并清除覆盖物
                this.radio= '';
            },
            // 获取点击时的坐标
             showInfoClick(e){
                let lnglat = [e.lnglat.getLng(),e.lnglat.getLat()]
                 console.log(lnglat)
                this.points.push({lnglat:lnglat})
                 console.log(this.points)
            }

        },
        mounted() {
            //挂载阶段调用，DOM初始化完成进行地图初始化
            this.initMap();
        }
    }
</script>

<style scoped>
    .map_box {
        /*position: absolute;*/
        /*top: -30px;*/
        width: 100%;
        /*border-radius: 50%;*/
    }

    #container {

        padding: 0px;
        margin: 0px;
        width: 100%;
        /*height: 100vh ;*/
        height: calc(100vh - 4.4rem);

    }

    .cover {
        position: absolute;
        top: 10px;
        background-color: #ffffff;
        z-index: 15;
        width: 300px;
        padding: 10px;
        /*height: 40px;*/
        /*border: 2px solid #265abf;*/
        right: 10px;
        box-shadow: 0 0 10px 0 rgba(203, 203, 203, 0.3);
        border-radius: 5px;
    }

    .cover .el-radio {
        margin-right: 5px;
        margin-bottom: 5px;
    }

    /deep/ .cover .el-radio.is-bordered + .el-radio.is-bordered {
        margin-left: 0;
    }

    /deep/ .cover .input-item .el-button.is-round {
        padding: 5px 10px;
    }

    .cover .input-item {
        /*text-align: right;*/
        display: flex;
        justify-content: space-around;
    }
</style>
